import React, { Component } from "react";
import { Icon, BackTop } from "antd";
import "./Articles.less";


class Articles extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const { contentData } = this.props.detailsContent;
    const goPage=(url)=>{
      window.open(url)
    }
    console.log(contentData)
    return (
      <div className="article" style={{ padding: 20 }}>
        <BackTop />
        {contentData && contentData.title ? (
          <div>
            <div className="article-header">
              <h1>{contentData.title ? contentData.title : ""}</h1>
              <div className="icons">
                <span>
                  <Icon type="eye" />
                  &nbsp;
                  {contentData.scan_count ? contentData.scan_count : 0}
                </span>
                <span>
                  <Icon type="like" />
                  &nbsp;
                  {contentData.like_count ? contentData.like_count : 0}
                </span>
                <span>
                  <Icon type="edit" />
                  &nbsp;
                  {contentData.comment_count ? contentData.comment_count : 0}
                </span>
                <span>
                  <Icon type="clock-circle" />
                  &nbsp;
                  {contentData.create_time ? contentData.create_time : ""}
                </span>
                <span>
                  <a onClick={()=>goPage(contentData.h5_url)}>原文链接</a>
                </span>
              </div>
            </div>

            <div>
              <span 
                className='content-container'
                dangerouslySetInnerHTML={{ __html: this.props.detailsContent.contentData.content }}
              ></span>

              {contentData.img_arr &&
                contentData.img_arr.map((item, i) => {
                  return <img key={i} src={item.url} alt={item.intro} style={{ width: "100%", marginBottom: 20 }} />;
                })}
              {contentData.url && (
                <div style={{ width: 800, height: 600 }}>
                  <video id="example_video_1" class="video-js vjs-default-skin" style={{ width: "100%", height: "100%" }} controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png">
                    <source src={contentData.url} type="video/mp4" />
                  </video>
                </div>
              )}
            </div>
          </div>
        ) : (
          <h1>暂无数据</h1>
        )}
      </div>
    );
  }
}

export default Articles;
